<template>
  <view class="ad-images">
    <h2 class="ad-images__title">
      <span class="ad-images__title-text">你可能感兴趣的</span>
    </h2>
    <view class="ad-images__inner">
      <view
        v-for="(item, index) in list || ['']"
        :key="index"
        :data-url="item.url"
        class="ad-images__item"
        @click="handleClick"
      >
        <skeleton title animate :row="3" :loading="loading">
          <view class="ad-images__item-img">
            <LazyLoadImg
              :index="index"
              threshold="0"
              width="100%"
              height="120"
              img-mode="aspectFill"
              :image="item.img_url"
            />
          </view>
          <view class="ad-images__item-bottom">
            <view class="ad-images__item-text ellipsis">
              <text class="ad-images__item-tag">
                {{ item.tags.join(' | ') }}
              </text>
              {{ item.des }}
            </view>
          </view>
        </skeleton>
      </view>
    </view>
    <template v-if="!loading">
      <view v-if="hasMore" class="ad-images__more" @click="handleClickMore">
        加载更多>>
      </view>
      <!-- <view v-else class="ad-images__more">暂无更多~</view> -->
    </template>
  </view>
</template>


<script>
import LazyLoadImg from '@/components/LazyLoadImg2';
import { platformName } from '../../../config';

export default {
  components: {
    LazyLoadImg,
  },

  data() {
    return {
      loading: true,
      list: [],
      page: 1,
      total: 0,
    };
  },

  computed: {
    hasMore() {
      return this.list.length < this.total;
    },
  },

  methods: {
    // 获取主题数据
    getAdImages() {
      this.$http({
        method: 'GET',
        url: '/api/front/advisement',
        data: {
          page: this.page,
          limit: 3,
        },
      }).then((res) => {
        if (res.ok) {
          this.list = [...this.list, ...res.data.list];
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },

    handleClickMore() {
      this.page = this.page + 1;
      this.getAdImages();
    },

    handleClick(event) {
      const { url = '' } = event.currentTarget.dataset;
      const isHttp = /^(http|https):\/\/.*/;
      const isPages = /^\/pages\/.*$/;
      if (isHttp.test(url)) {
        if (platformName === 'web') {
          window.location.href = url;
        } else {
          uni.navigateTo({
            url: `/sub-packages/webview/index?url=${url}`,
          });
        }
      } else if (isPages.test(url)) {
        uni.navigateTo({
          url: url,
        });
      }
    },
  },

  created() {
    this.getAdImages();
  },
};
</script>

<style lang="scss">
.ad-images {
  background: #fff;
  margin-top: 16rpx;

  &__inner {
    padding-top: 24rpx;
  }

  &__title {
    padding: 24rpx $page-row-spacing;
    margin: 0;
    color: $font-color-title;
    font-size: 28rpx;
    border-bottom: 1rpx solid $border-color-gray;
    line-height: 32rpx;
    font-weight: 400;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    &-text::before {
      content: ' ';
      display: inline-block;
      width: 8rpx;
      background: $font-color-main;
      height: 32rpx;
      vertical-align: top;
      border-radius: 6rpx;
      margin-right: 16rpx;
    }
  }

  &__item {
    padding: 0 30rpx;
    position: relative;
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }

    &-img {
      width: 100%;
      height: 300rpx;
      border: none;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.2);
      overflow: hidden;
      background: rgba(0, 0, 0, 0.1);
    }

    &-bottom {
      position: absolute;
      bottom: 0;
      left: 30rpx;
      right: 30rpx;
      display: block;
      padding: 8rpx;
      font-size: 24rpx;
      color: #fff;
      text-align: left;
      line-height: 32rpx;

      &::before {
        content: ' ';
        display: block;
        position: absolute;
        background: rgba(0, 0, 0, 0.2);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
        z-index: 1;
      }
    }

    &-text {
      position: relative;
      z-index: 2;
    }

    &-tag {
      color: #4990e2;
      margin-right: 8rpx;
    }
  }

  &__more {
    padding: 24rpx 30rpx;
    font-size: $font-base;
    color: $font-color-normal;
    border-radius: 6rpx;
    text-align: center;
  }
}
</style>
